<template>
    <view class="container">
        <u-transition :show="show">
            <!--u-navbar
                leftIconSize="44rpx"
                :autoBack="true"
            >
            </u-navbar-->
            <!-- #ifdef H5 -->
            <view style="height: 30px"></view>
            <!-- #endif -->
            <view class="title">
                <u-text
                    :text="productInfo.name"
                    size="34rpx"
                    :lines="1"
                    bold
                    color="#000000"
                    align="center"
                ></u-text>
            </view>
            <view v-if="productInfo.type != 'shop' && isShowTags=='1'" class="nft-tag"></view>
            <view class="product-image">
                <z-swiper effect="cube" v-if="productInfo.albumImgs.length > 1" :loop="false" autoplay="3000" @change="onChange" :showIndicators="false" customStyle="height:556rpx;width:556rpx;">
                    <z-swiper-item v-for="(img, k) in productInfo.albumImgs" :key="k">
                        <image class="image" :src="img.url"
                            mode="aspectFill">
                        </image>
                    </z-swiper-item>
                    <!--z-swiper-item>
                        <image class="image" src="https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg"
                            mode="aspectFill">
                        </image>
                    </z-swiper-item>
                    <z-swiper-item>
                        <image class="image" src="https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe3.jpg"
                            mode="aspectFill">
                        </image>
                    </z-swiper-item>
                    <z-swiper-item>
                        <image class="image" src="https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe4.jpg"
                            mode="aspectFill">
                        </image>
                    </z-swiper-item>
                    <z-swiper-item>
                        <image class="image" src="https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe5.jpg"
                            mode="aspectFill">
                        </image>
                    </z-swiper-item-->
                </z-swiper>
                <image v-else
                    :src="productInfo.mainImg"
                    style="width:556rpx;height:556rpx;"
                    class="image"
                    mode="aspectFill"
                ></image>
            </view>
            <view class="dot">
                <view class="dot-item" :class="actionDot==k? 'dot-action':null" v-for="(img, k) in productInfo.albumImgs" :key="k"></view>
            </view>
            <block v-if="checkSpecNames">
                <view class="check-sku">
                    <view class="check-sku-title">已选</view>
                    <view class="check-sku-content">
                        <u-cell
                            :title="'数量 x' + number + ' '+checkSpecNames"
                            :border="false"
                            isLink
                            rightIconStyle="font-size: 28rpx"
                            titleStyle="font-size: 24rpx"
                            @click="showpopup"
                        ></u-cell>
                    </view>
                </view>
                <view class="border" style="margin-top: 20rpx"></view>
            </block>
            <view class="nft-info" v-if="productInfo.nft">
                <u-row customStyle="margin-bottom: 40rpx" :gutter="20">
                    <u-col span="6">
                        <u--text
                            text="合约地址"
                            size="24rpx"
                            color="#000000"
                        ></u--text>
                        <view class="input">
                            <text>{{ getSpliceText(productInfo.nft.contractAddr) }}</text>
                            <text @click="copy(productInfo.nft.contractAddr)">复制</text>
                        </view>
                    </u-col>
                    <u-col span="6">
                        <u--text
                            text="认证标识"
                            size="24rpx"
                            color="#000000"
                        ></u--text>
                        <view class="input">
                            <text>{{ productInfo.nft.tokenId }}</text>
                            <text @click="copy(productInfo.nft.tokenId)">复制</text>
                        </view>
                    </u-col>
                </u-row>
                <u-row customStyle="margin-bottom: 40rpx" :gutter="20">
                    <u-col span="6">
                        <u--text
                            text="认证标准"
                            size="24rpx"
                            color="#000000"
                        ></u--text>
                        <view class="text-info">
                            <block v-if="productInfo.nft.type == 'e721'">
                            ERC721
                            </block>
                            <block v-if="productInfo.nft.type == 'e1155'">
                            ERC1155
                            </block>
                        </view>
                    </u-col>
                    <u-col span="6">
                        <u--text
                            text="认证网络"
                            size="24rpx"
                            color="#000000"
                        ></u--text>
                        <view class="text-info">
                            Polygon
                        </view>
                    </u-col>
                </u-row>
                <!--view class="row">
                    <u--text
                            text="拥有者"
                            size="24rpx"
                            color="#000000"
                        ></u--text>
                        <view class="text-info">
                            GDT365
                        </view>
                </view-->
                <view class="border"></view>
            </view>
            <view class="product-detail">
                <rich-text :nodes="productInfo.detail"></rich-text>
            </view>
            <view class="extend">
                <view class="extend-item" v-for="(item, k) in productInfo.extendInfo" :key="k">
                    <view class="extend-title">···————「 {{ item.title }} 」————···</view>
                    <view class="extend-content">{{ item.content }}</view>
                </view>
            </view>
            <view class="bottom" v-if="!isSold">
                <view class="buy">
                    <view class="total-price">
                        <text>¥</text>
                        <text>{{ price }}</text>
                    </view>
                    <view class="btns" v-if="userId">
                        <!--view class="buy-btn" style="margin-right: 24rpx;" @click="showpopup(true)">加入购物</view-->
                        <view v-if="productInfo.type === 'nft'" class="buy-btn" @click="showpopup()">立即购买</view>
                        <view  v-else class="buy-btn" @click=" checkSpecNames? onsubmit():showpopup()">立即购买</view>
                    </view>
                    <view v-else class="buy-btn" @click="onlogin">立即登录</view>
                </view>
            </view>
            <view class="bottom" v-else>
                <view class="sold">
                    <view class="total-price">
                        <text>¥</text>
                        <text>{{ price }}</text>
                    </view>
                    <view class="btn-sold">已售罄</view>
                </view>
            </view>
            <u-toast ref="uToast"></u-toast>
        </u-transition>
        <u-popup :show="popupshow" :round="10" @close="closePopup" mode="bottom">
            <view class="popup">
                <view class="sku">
                    <u-image
                        :src="checkSkuImg"
                        width="180rpx"
                        height="180rpx"
                        radius="12rpx"
                    ></u-image>
                    <view class="info">
                        <view class="text-1">
                            <u-text
                                :text="productInfo.name"
                                size="30rpx"
                                color="#000000"
                                :lines="2"
                            ></u-text>
                        </view>
                        <view class="text-2">
                            <u-text
                                :text="'库存：' + stock"
                                size="24rpx"
                                color="#666666"
                            ></u-text>
                        </view>
                        <view class="text-3">
                            <u-text
                                :text="price"
                                size="34rpx"
                                color="#356CE7"
                                blod
                                mode="price"
                                iconStyle="22rpx"
                            ></u-text>
                        </view>
                    </view>
                </view>
                <u-list
                    height="300rpx"
                    v-if="productInfo.specInfo.length > 0"
                >
                    <view class="spec-info" style="margin-top: 30rpx;" v-for="(item, index) in productInfo.specInfo" :key="index">
                        <u-row justify="space-between">
                            <u-col span="6">
                                <u--text
                                    :text="item.name"
                                    size="24rpx"
                                    color="#000000"
                                ></u--text>
                            </u-col>
                        </u-row>
                        <view class="spec">
                            <block
                                v-for="(spec_value, k) in item.spec_value"
                                :key="k"
                            >
                                <view
                                    class="spec-tag"
                                    :class="spec_value.disable? 'disable': ''"
                                    v-if="!spec_value.check"
                                    @click="checkSpecValue(item.id, spec_value, index)"
                                >{{ spec_value.name }}</view>
                                <view
                                    v-else
                                    class="spec-tag selected"
                                    @click="checkSpecValue(item.id, spec_value, index)"
                                >{{ spec_value.name }}</view>
                            </block>
                        </view>
                    </view>
                </u-list>
                <view class="spec-info">
                    <u-row justify="space-between">
                        <u-col span="6">
                            <u-text
                                text="属性"
                                size="24rpx"
                                color="#000000"
                            ></u-text>
                        </u-col>
                    </u-row>
                    <view class="spec" v-if="productInfo.type == 'shop'">
                        <view class="spec-tag selected">寄售商品</view>
                    </view>
                    <view class="spec" v-if="productInfo.type == 'nft'">
                        <view class="spec-tag selected">数字藏品</view>
                    </view>
                    <view class="spec" v-if="productInfo.type == 'nft_shop'">
                        <view class="spec-tag selected">寄售商品</view>
                        <view class="spec-tag selected">数字藏品</view>
                    </view>
                </view>
                <view class="spec-info u-flex">
                    <u-text
                        text="数量"
                        size="24rpx"
                        color="#000000"
                        block
                    ></u-text>
                    <view class="buy-num">
                        <view class="minus" :class="number <= 1? 'minus-disabled':null" @click="count(-1)"></view>
                        <view class="num">{{ number }}</view>
                        <view class="add" :class="number>=stock? 'add-disabled':null" @click="count(1)"></view>
                    </view>
                </view>
                <view @click="addCartsubmit" v-if="isCart" class="buy-btn">加入购物车</view>
                <view @click="onsubmit" v-else class="buy-btn">立即购买</view>
            </view>
        </u-popup>
        <new-people></new-people>
    </view>
</template>
<script>
import { getProductInfo, nftCreateOrder, getWechatPay, addCart } from "@/config/api"
import NewPeople from "@/components/NewPeople"
export default {
    components: {
        NewPeople
    },
    data() {
        return {
            productInfo: {
                product_sku: [],
                albumImgs: [],
                nft: {},
                specInfo: []
            },
            showflasg: false,
            checkSku: [],
            price: null,
            checkSkuId: null,
            checkSkuImg: null,
            checkSpecNames: null,
            barHeight: "0px",
            confirm: null,
            isSold: false,
            stock: null,
            show: false,
            popupshow: false,
            actionDot: 0,
            number: 1,
            isCart: false
        }
    },
    async onLoad(option) {
        //console.log(res.statusBarHeight)
        //this.top = res.statusBarHeight+44 + 'px'
        //this.barHeight = res.statusBarHeight + 44 + "px"
        const res = uni.getSystemInfoSync()
        var height = res.statusBarHeight
        //var height = this.$store.getters.statusBarHeight
        this.barHeight = "44px"
        await this.getData(option.productId)
        this.show = true
    },
    computed: {
        userId() {
            return this.$store.getters.userId
        },
        isShowTags() {
            return this.$store.getters.isShowTags
        }
    },
    methods: {
        onChange(index) {
            this.actionDot = index
        },
        async getData(id) {
            this.productInfo = await getProductInfo(id)
            this.stock = this.productInfo.stock
            this.isSold = this.productInfo.stock > 0? false:true
            this.productInfo.specInfo.forEach(item => {
                item.spec_value.forEach(v => {
                    v.check = false
                    v.disable = false
                })
            })
            this.price = this.productInfo.price
            this.checkSkuImg = this.productInfo.mainImg
        },
        checkSpecValue(specId, specValue, index) {
            if (specValue.disable) {
                return
            }
            this.showflag = !this.showflag          //Uniapp bug 删了无法更新视图
            this.checkSku[index] = specValue.id
            this.price = this.getPrice()
            this.productInfo.specInfo.forEach((item, i) => {
                item.spec_value.forEach(v => {
                    if (v.id == specValue.id) {
                        v.check = true
                    } else if (item.id == specId) {
                        v.check = false
                    }
                    if(index != i) {
                        var specIds = []
                        specIds[index] = specValue.id
                        specIds[i] = v.id
                        var disable = true
                        this.productInfo.product_sku.forEach(sku => {
                            if (specIds.toString() == sku.specIds.toString()) {
                                //console.log(specIds.toString() +"=="+sku.specIds.toString())
                               disable = false
                            }
                        })
                        v.disable = disable
                    }
                })
            })
        },
        getPrice() {
            var price = null;
            price = this.productInfo.price
            this.productInfo.product_sku.forEach(sku => {
                if (this.checkSku.toString() == sku.specIds.toString()) {
                    //console.log(this.checkSku.toString() +"=="+sku.specIds.toString())
                    price = sku.price
                    this.isSold = sku.stock > 0? false:true
                    this.stock = sku.stock
                    this.checkSkuId = sku.id
                    this.checkSkuImg = sku.productImg? sku.productImg:this.productInfo.mainImg
                    this.checkSpecNames = sku.specNames
                }
            })
            //console.log(price)
            return price
        },
        async onsubmit() {
            if(this.productInfo.stock <= 0) {
                uni.showToast({
                    title: '商品已售罄~',
                    duration: 2000,
                    icon: 'none'
                })
                return
            }
            if (this.productInfo.type == 'nft') {
                uni.showLoading({
                    title: '正在生成订单'
                })
                if (!this.confirm) {
                    this.confirm = await nftCreateOrder({ id: this.productInfo.id, number: this.number })
                }
                const payment = await getWechatPay({
                    orderId: this.confirm.id,
                    productName: this.productInfo.name,
                    openId: this.$store.getters.mpOpenId
                })
                uni.hideLoading()
                const than= this
                /*uni.requestPayment({
                    provider: 'wxpay',
                    ...payment,
                    success: function (res) {
                        console.log(res)
                        than.navigateTo("pages/orderComplete/index",{
                            orderId: than.confirm.id
                        })
                    },
                    fail: function (err) {
                        console.log(err)
                    }
                })*/
                WeixinJSBridge.invoke('getBrandWCPayRequest', payment,  (res) => {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        // 使用以上方式判断前端返回,微信团队郑重提示：
                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                        than.navigateTo("pages/orderComplete/index",{
                            orderId: than.confirm.id
                        })
                    }
                })
            } else {
                if (this.productInfo.product_sku.length > 0 && !this.checkSkuId) {
                    uni.showToast({
                        title: '请选择商品规格',
                        duration: 2000,
                        icon: 'none'
                    })
                    return
                }
                this.navigateTo('pages/orderConfirm/index',{
                    id: this.productInfo.id,
                    skuId: this.checkSkuId,
                    number: this.number
                })
            }
        },
        onlogin() {
            uni.$u.route('pages/login/index')
            //await this.$store.dispatch("user/login")
        },
        copy(text) {
            uni.setClipboardData({
                data: text + '',
                success: function () {
                    this.$refs.uToast.show({
                        type: 'default',
                        message: "复制成功"
                    })
                },
                fail: function() {
                    console.log('复制失败')
                }
            });
        },
        getSpliceText(str) {
            if (!str) {
                return str
            }
            var sub1 = str.slice(0, 8)
            var sub2 = str.slice(-6)
            return sub1 + '...' +sub2
        },
        navigateTo(path, params={}) {
            uni.$u.route({
				url: path,
				params
			})
        },
        showpopup(isCart=false) {
            this.popupshow = true
            this.isCart = isCart
        },
        closePopup() {
            this.popupshow = false
        },
        count(num) {
           if (this.number <= 1 && num < 0) {
                return
           }
           if (this.number >= this.stock  && num > 0) {
                return
           }
           this.number += num
        },
        async addCartsubmit() {
            if(this.productInfo.stock <= 0) {
                uni.showToast({
                    title: '商品已售罄~',
                    duration: 2000,
                    icon: 'none'
                });
                return
            }
            if (this.productInfo.product_sku.length > 0 && !this.checkSkuId) {
                uni.showToast({
                    title: '请选择商品规格',
                    duration: 2000,
                    icon: 'none'
                });
                return
            }
            var form = {
                productId: this.productInfo.id,
                num: this.number
            }
            if (this.checkSkuId) {
                form.skuId = this.checkSkuId
            }
            const res = await addCart(form)
            uni.showToast({
                title: '加入购物成功~',
                duration: 2000,
                icon: 'none'
            });
            this.popupshow = false
        }
    },
    onShareAppMessage() {
        return {
            title: 'ionepin',
            desc: "商品详情",
            path: '/pages/productDetail/index?productId=' + this.productInfo.id
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        .title {
            width: 636rpx;
            margin-right: auto;
            margin-left: auto;
            margin-bottom: 18rpx;

        }
        .nft-tag {
            width: 100rpx;
            height: 40rpx;
            background: url(https://ionepin.oss-cn-shenzhen.aliyuncs.com/967825cfb630bf72832c10b8d3ed3d64ad249bc8.png) no-repeat;
            background-size: 100% 100%;
            margin: auto;
            margin-bottom: 12rpx;
        }
        .product-image {
            box-sizing: border-box;
            width: 636rpx;
            height: 636rpx;
            background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/product_border.png) no-repeat;
            background-size: 100% 100%;
            padding: 30rpx 28rpx 40rpx 40rpx;
            margin: auto;
            .image {
                height: 556rpx;
                width: 100%;
            }
        }
        .dot {
            display: flex;
            justify-content: center;
            margin: 10rpx auto 30rpx auto;
            .dot-item {
                width: 12rpx;
                height: 12rpx;
                background: #D8D8D8;
                border-radius: 50%;
                margin-right: 16rpx;
            }
            .dot-action {
                background: #000000;
            }
        }
        .product-info {
            padding: 0 26rpx;
            position: relative;
            .spec-info {
                margin-top: 45rpx;
            }
            .spec {
                margin-top: 15rpx;
                display: flex;
                flex-wrap: wrap;
                .spec-tag {
                    box-sizing: border-box;
                    padding: 8rpx 40rpx;
                    border: 1rpx solid #B6B6B6;
                    margin-right: 20rpx;
                    margin-bottom: 20rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                }
                .selected {
                    border: none;
                    background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/tag_selected.png) no-repeat center;
                    background-size: 100% 100%;
                }
                .disable {
                    border: 1px solid #f4f4f5;
                    background: #f4f4f5;
                    color: #999999;
                }
            }
            .product-stock {
                position: absolute;
                right: 26rpx;
                top: 0;
            }
        }
        .border {
            width: 100%;
            height: 2rpx;
            background: #D8D8D8;
            margin: 60rpx 0;
        }
        .nft-info {
            padding: 0 26rpx;
            .input {
                border: 1rpx solid #000000;
                background-color: #EEEEEE;
                height: 68rpx;
                padding: 0 18rpx;
                line-height: 68rpx;
                margin-top: 20rpx;
                text {
                    font-size: 24rpx;
                    &:nth-child(1) {
                        color: #999999;
                    }
                    &:nth-child(2) {
                        display: block;
                        float: right;
                        color: #000000;
                    }
                }
            }
            .text-info {
                background-color: #EEEEEE;
                height: 68rpx;
                padding: 0 18rpx;
                line-height: 68rpx;
                margin-top: 20rpx;
                font-size: 24rpx;
                color: #999999;
            }
        }
        .product-detail {
            width: 100%;
            padding: 0 25rpx 0 25rpx;
            box-sizing: border-box;
        }
        .bottom {
            box-sizing: border-box;
            padding: 0 20rpx;
            position: fixed;
            bottom: 30rpx;
            left: 0;
            width: 100%;
            .total-price {
                text {
                    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
                    font-weight: bold;
                    color: #FFFFFF;
                    &:nth-child(1) {
                        font-size: 22rpx;
                    }
                    &:nth-child(2) {
                        font-size: 34rpx;
                    }
                }
            }
            .btns {
                overflow: hidden;
            }
            .buy {
                height: 90rpx;
                background: #000000;
                overflow: hidden;
                line-height: 90rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 36rpx 0 22rpx;
                .buy-btn {
                    text-align: center;
                    width: 190rpx;
                    height: 58rpx;
                    border-radius: 2rpx;
                    border: 1rpx solid #FFFFFF;
                    color: #FFFFFF;
                    font-size: 30rpx;
                    line-height: 58rpx;
                    float: left;
                }
            }
            .sold {
                height: 90rpx;
                background: #4A4A4A;
                overflow: hidden;
                line-height: 90rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 36rpx 0 22rpx;
                .btn-sold {
                    text-align: center;
                    width: 190rpx;
                    height: 58rpx;
                    border-radius: 2rpx;
                    color: #FFFFFF;
                    font-size: 30rpx;
                    line-height: 58rpx;
                    background: rgba(216,216,216, $alpha: 0.2);
                }
            }
        }
        .extend {
            margin: 40rpx 0 140rpx 0;
            padding: 0 25rpx;
            .extend-item {
                .extend-title {
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    text-align: center;
                    margin: 38rpx 0;
                }
                .extend-content {
                    font-size: 26rpx;
                    font-family: PingFang-SC-Light, PingFang-SC;
                    font-weight: 300;
                    color: #606266;
                    text-indent: 1.5em;
                }
            }
        }
        .check-sku {
            display: flex;
            padding: 0 26rpx;
            .check-sku-title {
                display:flex;
                justify-content:center;
                align-items:center;
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
            }
            .check-sku-content {
                flex: auto;
            }
        }
        .popup {
            height: 910rpx;
            padding: 29rpx 19rpx 20rpx 32rpx;
            position: relative;
            .sku {
                display: flex;
                .info {
                    margin-left: 19rpx;
                    .text-1 {
                        height: 84rpx;
                    }
                    .text-2 {
                        margin-top: 10rpx;
                    }
                    .text-3 {
                        margin-top: 10rpx;
                    }
                }
            }
            .spec-info {
                margin-top: 50rpx;
            }
            .u-flex {
                display: flex;
                justify-content: space-between;
            }
            .spec {
                margin-top: 15rpx;
                display: flex;
                flex-wrap: wrap;
                .spec-tag {
                    box-sizing: border-box;
                    padding: 8rpx 40rpx;
                    border: 1rpx solid #B6B6B6;
                    margin-right: 20rpx;
                    margin-bottom: 20rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                }
                .selected {
                    border: none;
                    background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/tag_selected.png) no-repeat center;
                    background-size: 100% 100%;
                }
                .disable {
                    border: 1px solid #f4f4f5;
                    background: #f4f4f5;
                    color: #999999;
                }
            }
            .buy-num {
                display: flex;
                float: right;
                margin-right: 16rpx;
                .minus {
                    background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_sub.png) no-repeat;
                    background-size: 100% 100%;
                    text-align: center;
                    width: 50rpx;
                    height: 50rpx;
                    color: #FFFFFF;

                }
                .minus-disabled {
                    background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_disabled_sub.png) no-repeat;
                    background-size: 100% 100%;
                }
                .num {
                    width: 100rpx;
                    text-align: center;
                    line-height: 50rpx;
                    font-size: 28rpx;
                }
                .add {
                    background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_add.png) no-repeat;
                    background-size: 100% 100%;
                    text-align: center;
                    width: 50rpx;
                    height: 50rpx;
                }
                .add-disabled{
                    background: url(https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_disabled_add.png) no-repeat;
                    background-size: 100% 100%;
                }
            }
            .buy-btn {
                text-align: center;
                background: #000000;
                font-size: 30rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                height: 90rpx;
                position: absolute;
                bottom: 20rpx;
                width: calc(100% - 51rpx);
                line-height: 90rpx;
            }
        }
    }
</style>
